@import "../css/live_view.css";
@import "./base.scss";
// 因为定制变量，bulma 需要在 base.scss 之后导入
@import "../node_modules/bulma/bulma.sass";
@import "./components/article.scss";
@import "./pages/index.scss";
@import "./pages/topics.scss";
@import "./pages/article.scss";
@import "./pages/city.scss";
@import "./pages/user.scss";
@import "./pages/contribute.scss";

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.cm-footer {
  flex: 1;
}

$nav-menu-item-border-width: 3px;
$nav-menu-item-transition-duration: 0.2s;
$navbar-background-active-color: darken($navbar-background-color, 10%);

a.navbar-item:not(:first-child) {
  color: darken($default-link-color, 10%);
  border-top: $nav-menu-item-border-width solid rgba(0, 0, 0, 0);
  border-bottom: $nav-menu-item-border-width solid rgba(0, 0, 0, 0);
  transition: border-bottom $nav-menu-item-transition-duration,
    color $nav-menu-item-transition-duration;
  &:hover,
  &.is-active {
    color: $elixir-color;
    border-top: $nav-menu-item-border-width solid
      $navbar-item-hover-background-color;
    border-bottom: $nav-menu-item-border-width solid $elixir-color;
  }
  &:active {
    background-color: $navbar-background-active-color;
    border-top: $nav-menu-item-border-width solid
      $navbar-background-active-color;
    border-bottom: $nav-menu-item-border-width solid
      darken($default-background-color, 25%);
  }
}

.card {
  border-radius: $radius-large;
  .card-footer {
    border-radius: 0 0 $radius-large $radius-large;
  }
  .card-header {
    border-radius: $radius-large $radius-large 0 0;
  }
}

.cm-page > .container > .section {
  padding: 1.5rem 0.75rem;
  & > .columns {
    margin-left: 0;
    margin-right: 0;
    & > .column {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.cm-footer {
  a {
    color: $default-link-color;
    span {
      font-weight: bold;
    }
    &:hover {
      color: $elixir-color;
    }
  }
}

// 改进不同设备样式
@media screen and (min-width: 1024px) {
  .cm-page > .container > .section {
    padding: 1.5rem 0;
    & > .columns {
      margin-left: -0.75rem;
      margin-right: -0.75rem;
      & > .column {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .cm-page > .container > .section {
    padding: 1.5rem 0;
  }
}

// 类样式实现
.cm {
  //粘性定位
  &-sticky {
    position: sticky;
    top: $navbar-height + ($column-gap * 2);
  }
}
